<template>
    <div class="wrap">
        <div class="logo-wrap">
            <img src="../assets/ytrj.png" class="logo" alt="">
        </div>
        <div class="login-form">
            <img src="../assets/dengl.png" class="login-img" alt="">
            <div class="username">
                <img src="../assets/username.png" alt="">
                <input type="text" v-model="name" placeholder="用户名">
            </div>
            <div style="height: 11px;"></div>
            <div class="password">
                <img src="../assets/password.png" alt="">
                <input type="password" v-model="pws" placeholder="密码">
            </div>
            <div class="btn" @click="loginHandle">登录</div>
        </div>
    </div>
</template>
<script>
import { login } from "../api/login"
import { setToken } from '../utils/token'
import { setItem } from '../utils/session'
export default {
    name: 'login',
    data() {
        return {
            name: '',
            pws: ''
        }
    },
    methods: {
        loginHandle() {
            let param = {
                username: this.name,
                pws: this.pws
            }
            login(param).then(res=>{
                setToken(res.data.token)
                let { name, uid, data, curpage, pagesize } = res.data
                this.$toast.success('登录成功');
                setItem("name",name)
                setItem("uid",uid)
                setItem("pagesize",pagesize)
                this.$router.push({name: 'index',params: {name:name, uid:uid, data:data, curpage, pagesize}})
            }).catch(err=>{
                console.log(err)
            })
        }
    }
}
</script>
<style scoped>
    .wrap {
        height: 100%;
        min-height: 100vh;
        width: 100%;
        background: url('../assets/bk.png') no-repeat;
        background-size: 100% 100%;
    }
    .logo-wrap {
        text-align: right;
        box-sizing: border-box;
        padding: 19px 14px 0 0;
    }
    .logo {
        width: 110px;
        height: 30px;
    }
    .login-form {
        width: 288px;
        margin: 90px auto;
    }
    .login-img {
        width: 150px;
        height: 48px;
        margin-bottom: 34px;
    }
    .login-form input {
        width: 100%;
        height: 51px;
        border: none;
        outline: none;
        background: url("../assets/input.png") no-repeat;
        background-size: 100% 100%;
        box-shadow: 0px 20px 40px 0px rgba(10, 51, 84, 0.43);
        border-radius: 10px;
        padding-left: 58px;
        box-sizing: border-box;
        /* margin-bottom: 11px; */
    }
    input::placeholder{
        color:#7EA0BC;
    }
    .username,
    .password {
        position: relative;
    }
    .username img,
    .password img {
        position: absolute;
        left: 15px;
        top: 50%;
        width: 14px;
        height: 15px;
        transform: translateY(-50%);
    }
    .btn {
        width: 100%;
        height: 44px;
        line-height: 44px;
        margin-top: 210px;
        text-align: center;
        background: url("../assets/btn.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;
        font-size: 18px;
        border-radius: 50px;
    }
</style>

